import {
  onMounted,
} from 'vue';
import Two from 'two.js';

export default function useTwoJsDemo() {
  function mountTwojs() {
    const two = new Two({
      width: 600,
      height: 400,
      autostart: true,
    }).appendTo(document.getElementById('twojs'));

    const amt = 64;

    const points = [];
    for (let i = 0; i < amt; i++) {
      const pct = i / (amt - 1);
      const theta = pct * Math.PI * 8;
      const r = pct * Math.min(two.height, two.width);
      const x = r * Math.cos(theta);
      const y = r * Math.sin(theta);
      points.push(new Two.Anchor(x, y));
    }
    const path = two.makeCurve(points, true);

    path.noFill().linewidth = 25;
    path.join = 'round';
    path.cap = path.join;
    path.stroke = 'white';

    const cursor = two.makeCircle(0, 0, 25);
    cursor.stroke = 'rgb(255, 255, 0)';
    cursor.fill = cursor.stroke;
    cursor.linewidth = 10;

    const rotating = true;

    two.scene.translation.set(two.width / 2, two.height / 2);

    const v = new Two.Vector(1, 0);

    two
      .bind('update', () => {
        if (rotating) {
          // two.scene.rotation += Math.PI / 64;
          cursor.translation.addSelf(v);
        }
      })
      .bind('resize', () => {
        two.scene.translation.set(two.width / 2, two.height / 2);
      });
  }

  onMounted(mountTwojs);
}
